Chrome DevTools Protocol

Claude Code.icon

Chrome DevTools Protocol は、Chromiumベースのブラウザ（Chrome、Edge等）をプログラムから操作・検査するための低レベルプロトコルです。

基本的な仕組み

WebSocket接続でブラウザと通信する

JSON形式のコマンド/イベントをやり取りする

ブラウザ起動時に --remote-debugging-port=9222 のようなフラグで有効化

主なドメイン（機能領域）

table:_

ドメインできること

Page ページナビゲーション、スクリーンショット、PDF生成

DOM DOMツリーの取得・操作

Network リクエスト/レスポンスの傍受・変更

Runtime JavaScript の評価・実行

Debugger ブレークポイント、ステップ実行

Input キーボード・マウスイベントの合成

Emulation デバイス・ネットワーク条件のエミュレーション

通信の流れ

code:_

クライアント → WebSocket → ブラウザ

{"id":1, "method":"Page.navigate", "params":{"url":"https://example.com"}}

ブラウザ → WebSocket → クライアント

{"id":1, "result":{"frameId":"..."}} ← コマンドの応答

{"method":"Page.loadEventFired", ...} ← イベント通知

代表的なクライアントライブラリ

Puppeteer — CDPを直接使うNode.jsライブラリ（Google製）

Playwright — CDPに加え、Firefox/WebKitも独自プロトコルで対応（Microsoft製）

chrome-remote-interface — CDPの薄いラッパー

Selenium 4 — BiDi/CDPのハイブリッド

DevToolsとの関係

普段使っているChromeのDevTools（F12で開く画面）は、内部的にこのプロトコルを使ってブラウザと通信しています。つまりCDPを使えば、DevToolsでできることをすべてプログラムから実行できます。

注意点

CDPはChromium固有。標準化された後継として WebDriver BiDi が策定中

ブラウザのバージョンアップでAPIが変わる可能性がある（安定版/実験版の区別あり）

1つのページに対して同時に接続できるCDPセッション数に制限がある場合がある